<template>
  <view class="body">
    <u-search class="search-box" placeholder="请输入" height="70" v-model="form.title"
              @custom="popupShow=true" action-text="筛选" @search="search()" :animation="false" ></u-search>
    <u-popup v-model="popupShow" mode="right">
      <view style="padding-left: 30rpx;padding-right: 30rpx;">
        <u-form labelPosition="left" :model="form" ref="uForm" labelWidth="80">
          <u-form-item label="线索状态" prop="type1Name" label-width="140">
            <u-input v-model="form.type1Name" :border="true" type="select" @click="show1=true"
                     placeholder="请选择线索状态"></u-input>
          </u-form-item>
          <u-form-item label="线索级别" prop="type2" label-width="140">
            <u-input v-model="form.type2Name" :border="true" type="select" @click="show2=true"
                     placeholder="请选择线索级别"></u-input>
          </u-form-item>
        </u-form>
        <u-select v-model="show1" :list="list1" @confirm="(e)=>{form.type1Name=e[0].label;form.type1=e[0].value;}"></u-select>
        <u-select v-model="show2" :list="list2" @confirm="(e)=>{form.type2Name=e[0].label;form.type2=e[0].value;}"></u-select>
        <view style="display: flex;flex-direction: row;justify-content: space-between;">
          <u-button @click="form={
        title: form.title,
        type1: '',
        type1Name: '',
        type2: '',
        type2Name: '' }" style="margin-top: 60rpx;">清空</u-button>
          <u-button @click="search" style="margin-top: 60rpx;">确定</u-button>
        </view>

      </view>
    </u-popup>
    <view class="center">
      <view class="user" v-if="list3.length>0">
        <view class="user-item" v-for="(item,index) in list3" :key="index">
          <u-avatar :src="item.img" size="80"></u-avatar>
          <view class="title">
            <view class="title-item">
              <text>{{item.name1}}</text>
              <text class="text" style="color: #fff;background-color: #2979ff;padding: 10rpx;border-radius: 10rpx">{{item.type1}}</text>
              <text class="text" style="color: #fff;background-color: #2979ff;padding: 10rpx;border-radius: 10rpx">{{item.type2}}</text>
            </view>
            <view class="title-item">
              <text>{{item.name2}}</text>
              <text class="text">{{item.phone}}</text>
            </view>
          </view>
          <u-button class="btn" type="primary" size="mini" @click="infoClick(item)" >详情</u-button>
        </view>
      </view>
      <view class="nothing" v-if="list3.length===0">
        <u-icon name="file-text"  size="300"></u-icon>
        <view>暂无线索信息</view>
      </view>
      <u-icon class="myPlus" name="plus"  size="50" @click="Add"></u-icon>
    </view>
  </view>
</template>

<script>
import debug from "@/pages_base/common/debug.vue";
import appMixin from "@/mixins/app";

export default {
  mixins: [appMixin],
  computed: {
    debug() {
      return debug
    }
  },
  data() {
    return {
      form: {
        title: '',
        type1: '',
        type1Name: '',
        type2: '',
        type2Name: '',
      },
      popupShow:false,
      show1:false,
      label1:{
        value: '0',
        label: '线索状态'
      },
      list1:[
        {
          value: '1',
          label: '江'
        },
        {
          value: '2',
          label: '湖'
        }
      ],
      show2:false,
      label2:{
        value: '0',
        label: '线索级别'
      },
      list2:[
        {
          value: '1',
          label: '江'
        },
        {
          value: '2',
          label: '湖'
        }
      ],
      list3:[
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
        {
          name1:'线索管理',
          name2:'线索管理',
          type1:'线索管理',
          type2:'线索管理',
          phone:'12121',
          img:'',
          url:''
        },
      ]
    };
  },
  methods:{
    search(){
      console.log('搜索',this.form)
      this.popupShow=false
    },
    infoClick(item){
      console.log('详情',item)
      this.$u.route({
        url: '/pages_xzx/marketCRM/clueInfo',
        params: {
          id: item.phone
        }
      })
    },
    Add(){
      console.log('新增数据')
    }
  }
}
</script>

<style lang="scss" scoped>
.body{
  height: 100%;
  width: 100%;
  padding: 20rpx 20rpx 0 20rpx;
  .center{
    height: calc(100% - 70rpx);
    overflow-y: auto;
    position: relative;

    .user{
      height: 100%;
      overflow-y: auto;
      background-color: #f9f9f9;
      .user-item{
        display: flex;
        align-items: center;
        padding: 20rpx;
        margin: 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
        .img{
          flex: 1;
        }
        .title{
          flex: 2;
          margin-left: 20rpx;
          text-align: center;
          display: flex;
          flex-direction: column;
          .title-item{
            display: flex;
            justify-content: left;
            align-items: center;
            .text{
              margin-left: 10rpx;
            }

          }
        }
        .btn{
          margin-right: 20rpx;
        }
      }
    }
    .nothing{
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .myPlus{
      position: fixed;
      bottom: 10vh;
      right: 40rpx;
      padding: 10rpx;
      border-radius: 50%;
      border: 5rpx solid;
      z-index: 999;
      background-color: #fff;
    }
  }
}
</style>
